<template>
    <div style="width: 100%; height: 100%">
        <div class="mistakesCollectionContainer">
            <div class="mistakesCollectionContainer_containers">
                <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
                    label-width="68px">
                    <el-form-item label="题库类别" prop="classId">
                        <el-select v-model="queryParams.classId" placeholder="选择题库" clearable filterable
                            style="width:120px" @change="handleQuery">
                            <el-option v-for="dict in classIdArr" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题类型" prop="questionType" clearable>
                        <el-select v-model="queryParams.questionType" placeholder="选择题型" clearable filterable
                            style="width:120px" @change="handleQuery">
                            <el-option v-for="dict in questionTypeArr" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" prop="status">
                        <el-select v-model="queryParams.status" placeholder="选择状态" clearable filterable
                            style="width:120px" @change="handleQuery">
                            <el-option v-for="dict in statusArr" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-document" size="mini" >浏览</el-button>
                    </el-form-item>
                </el-form>

                <div class="table_containers">
                    <div class="table_containers_top">
                        <el-button :disabled="multiple" plain size="mini" type="danger" @click="handleDelete">取消收藏
                        </el-button>
                    </div>
                    <div class="table_containers_table">
                        <el-table v-loading="loading" :data="dataList" :header-cell-style="{
                    'background-color': '#E6E9EF',
                    color: '#777C7C',
                    'font-weight': '400',
                    'font-size': '12px',
                    'border-right': '1px solid #ffffff'
                }" highlight-current-row size="mini" :border="true" style="width: 100%" ref="table" stripe class="elTable"
                            @selection-change="handleSelectionChange">
                            <el-table-column align="center" type="selection" width="50" fixed="left"/>
                            <el-table-column align="center" label="序号" type="index" width="60" fixed="left">
                                <template slot-scope="scope">
                                    <span>{{ getIndex(scope.$index) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="操作" width="120" fixed="left">
                                <template slot-scope="scope">
                                    <el-button type="text" size="mini">取消收藏</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="类别" prop="className" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="章节/卷号" prop="reelNum" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="题号" prop="questionNum" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="题型" prop="questionTypeName" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="分数" prop="score" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="题目" prop="questionName" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="回答" prop="questionAnswer" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="答题者" prop="respondent" width="90">

                            </el-table-column>
                            <el-table-column align="center" label="答题日期" prop="respondentTime">

                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

export default {
    name: 'mistakesCollection',
    components: {

    },
    data() {
        return {
            dataList: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非多个禁用
            multiple: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                questionType: undefined,
                classId: undefined,
                status: undefined,

            },
            classIdArr: [
                { label: '章节练习', value: '0' },
                { label: '全真模拟', value: '1' },
                { label: '考试题库', value: '2' },
            ],
            questionTypeArr: [
                { label: '单选', value: '0' },
                { label: '多选', value: '1' }
            ],
            statusArr: [
                { label: '初次做错', value: '0' },
                { label: '重做做错', value: '1' },
                { label: '重做准确', value: '2' }
            ],

        };
    },
    updated() {
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
    },
    mounted() {
        const { state } = this.$store;
        this.dataList = [
            {
                id: 1,
                className: '章节类别',
                reelNum: '第一章****',
                questionTypeName: '单选',
                questionNum: 1,
                score: 2,
                questionName: '题目111',
                questionAnswer: 'C',
                respondent: '答题者',
                respondentTime: '2024-08-06'
            },
            {
                id: 2,
                className: '章节类别',
                reelNum: '第一章****',
                questionTypeName: '单选',
                questionNum: 1,
                score: 2,
                questionName: '题目111',
                questionAnswer: 'C',
                respondent: '答题者',
                respondentTime: '2024-08-06'
            }, {
                id: 3,
                className: '章节类别',
                reelNum: '第一章****',
                questionTypeName: '单选',
                questionNum: 1,
                score: 2,
                questionName: '题目111',
                questionAnswer: 'C',
                respondent: '答题者',
                respondentTime: '2024-08-06'
            }
        ]
        this.loading = false
    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {
        handleDelete() {

        },
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
            );
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            console.log(selection)
            this.ids = selection.map((item) => item.id);
            this.multiple = !selection.length;
        },
        handleQuery() {

        },

    },
};
</script>

<style scoped lang="scss">
.mistakesCollectionContainer {
    background: #fff;
    height: 100%;
    width: 100%;
    position: relative;

    &_containers {
        padding: 10px;
        
    }
    .table_containers{
        &_top{
         margin-bottom:4px;
        }
    }
 
}
</style>
